<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>盆栽商店</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="eCommerce HTML Template Free Download" name="keywords">
    <meta content="eCommerce HTML Template Free Download" name="description">

    <!-- Favicon -->
    <link href="img/favicon.ico" rel="icon">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400|Source+Code+Pro:700,900&display=swap" rel="stylesheet">

    <!-- CSS Libraries -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
    <link href="lib/slick/slick.css" rel="stylesheet">
    <link href="lib/slick/slick-theme.css" rel="stylesheet">

    <!-- Template Stylesheet -->
    <link href="css/product-detail.css" rel="stylesheet">
    <style>
        .abaaba{
            background-color: #05a7ff;
            border: #ffffff;
        }
        .ojbk{
            font-size: 5px;
            color: #05a7ff;
        }
    </style>
</head>

<body>
<!-- Top bar Start -->
<div class="top-bar">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6">
                <i class="fa fa-envelope"></i>
                CSU
            </div>
            <div class="col-sm-6">
                <i class="fa fa-phone-alt"></i>
                400-114514
            </div>
        </div>
    </div>
</div>
<!-- Top bar End -->
<!-- Nav Bar Start -->
<div class="nav">
    <div class="container-fluid">
        <nav class="navbar navbar-expand-md bg-dark navbar-dark">
            <a href="#" class="navbar-brand">MENU</a>
            <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
                <div class="navbar-nav mr-auto">
                    <a href="welcome" class="nav-item nav-link active">主页</a>
                    <a href="category?categoryId=cat" class="nav-item nav-link">花本植物</a>
                    <a href="category?categoryId=dog" class="nav-item nav-link">木本植物</a>
                    <a href="category?categoryId=bird" class="nav-item nav-link">草本植物</a>
                    <a href="category?categoryId=pokemon" class="nav-item nav-link">多肉植物</a>
                    <a href="category?categoryId=bugCat" class="nav-item nav-link">景观植物</a>
                </div>
                <div class="navbar-nav ml-auto">
                    <a href="cart" class="nav-item nav-link">购物车</a>
                    <!--用户是否登录-->
                    <c:if test="${sessionScope.username != null}">
                        <a href="space" class="nav-item nav-link">用户中心</a>
                    </c:if>
                    <c:if test="${sessionScope.username == null}">
                        <a href="login" class="nav-item nav-link">欢迎登录</a>
                    </c:if>
                </div>
            </div>
        </nav>
    </div>
</div>
<!-- Nav Bar End -->

<!-- Bottom Bar Start -->
<div class="bottom-bar">
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-md-3">
                <div class="logo">
                    <a href="welcome">
                        <img src="image/mainPage/logo.png" alt="Logo">
                    </a>
                </div>
            </div>
            <div class="col-md-6">
                <form action="Search" method="post">
                    <div class="search">
                        <input type="text" placeholder="搜索想要的盆栽吧" name="searchName">
                        <button><i class="fa fa-search"></i></button>
                    </div>
                </form>
            </div>
            <div class="col-md-3">
                <div class="user">

                    <a href="cart" class="btn cart">
                        <i class="fa fa-shopping-cart"></i>
                        <span>(0)</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Bottom Bar End -->

<!-- Checkout Start -->
<div class="checkout">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-8">
                <div class="checkout-inner">
                    <div class="billing-address">
                        <h2>添加地址</h2>
                        <div class="row">
                            <div class="col-md-6">
                                <label>昵称</label>
                                <input id = "name" class="form-control" type="text" placeholder="昵称">
                            </div>
                            <div class="col-md-6">
                                <label>邮箱</label>
                                <input id = "email" class="form-control" type="text" placeholder="邮箱">
                            </div>
                            <div class="col-md-6">
                                <label>电话号码</label>
                                <input id = "phoneNumber" class="form-control" type="text" placeholder="电话号码">
                                <h4 id = "msg" class="ojbk"> 请输入有效的电话号码！</h4>
                            </div>
                            <div class="col-md-12">
                                <label>详细地址</label>
                                <input id = "address" class="form-control" type="text" placeholder="详细地址">
                            </div>
                            <div class="col-md-6">
                                <label>国家</label>
                                <select id = "country" class="custom-select">
                                    <option selected>中国</option>
                                    <option>美国</option>
                                    <option>俄罗斯</option>
                                    <option>日本</option>
                                </select>
                            </div>
                            <script src="javascripts/province.js" type="text/javascript"></script>
                            <div class="col-md-6">
                                <label>省份</label>

                                <select name="province" id="province" class = "form-control" onchange="getCity()">
                                    <option value="" selected>省份</option>
                                    <option value="">四川省</option>
                                    <!-- 利用js把省份添加到下拉列表里-->
                                    <script type="text/javascript">
                                        for(var i=0;i<provinceArr.length;i++)
                                        {
                                            document.write("<option value='"+i+"'>"+provinceArr[i]+"</option>");

                                        }
                                    </script>
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label>城市</label>
                                <select name="city" id = "city" class="form-control">
                                    <option value="">城市</option>
                                    <option value="">成都市</option>
                                </select>

                            </div>
                            <div class="col-md-6">
                                <label>邮政编码</label>
                                <input class="form-control" type="text" placeholder="邮政编码">
                            </div>
                            <div class="col-md-12">
                                <div>

                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="shipping-address">
                        <h2>另一个地址</h2>
                        <div class="row">
                            <div class="col-md-6">
                                <label>昵称</label>
                                <input class="form-control" type="text" placeholder="昵称">
                            </div>
                            <div class="col-md-6">
                                <label>邮箱</label>
                                <input class="form-control" type="text" placeholder="邮箱">
                            </div>
                            <div class="col-md-6">
                                <label>电话号码</label>
                                <input class="form-control" type="text" placeholder="电话号码">



                            </div>
                            <div class="col-md-12">
                                <label>详细地址</label>
                                <input class="form-control" type="text" placeholder="详细地址">
                            </div>
                            <div class="col-md-6">
                                <label>国家</label>
                                <select class="custom-select">
                                    <option selected>中国</option>
                                    <option>美国</option>
                                    <option>俄罗斯</option>
                                    <option>日本</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label>省份</label>
                                <input class="form-control" type="text" placeholder="省份">
                            </div>
                            <div class="col-md-6">
                                <label>城市</label>
                                <input class="form-control" type="text" placeholder="城市">
                            </div>
                            <div class="col-md-6">
                                <label>邮政编码</label>
                                <input class="form-control" type="text" placeholder="邮政编码">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="checkout-inner">
                    <div class="checkout-summary">
                        <h1>购物车</h1>
                        <p class="sub-total">总价<span id = "price2">￥${sessionScope.orderTotalPrice}</span></p>
                        <p class="ship-cost">运输费用<span id = "price1">￥1.00</span></p>
                        <h2>总计<span id = "price3"></span></h2>
                    </div>

                    <div class="checkout-payment">
                        <div class="payment-methods">
                            <h1>支付方式</h1>
                            <div class="payment-method">
                                <div class="custom-control custom-radio">
                                    <input type="radio" class="custom-control-input" id="payment-1" name="payment">
                                    <label class="custom-control-label" for="payment-1">支付宝</label>
                                </div>
                                <div class="payment-content" id="payment-1-show">
                                    <p>

                                    </p>
                                </div>
                            </div>
                            <div class="payment-method">
                                <div class="custom-control custom-radio">
                                    <input type="radio" class="custom-control-input" id="payment-2" name="payment">
                                    <label class="custom-control-label" for="payment-2">微信付款</label>
                                </div>
                                <div class="payment-content" id="payment-2-show">
                                    <p>

                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="checkout-btn">
                            <button>订购</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Checkout End -->

<!-- Call to Action Start -->
<div class="call-to-action">
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h1>遇到问题?立即联系我们</h1>
            </div>
            <div class="col-md-6">
                <a href="tel:0123456789">400-114514</a>
            </div>
        </div>
    </div>
</div>
<!-- Call to Action End -->

<!-- Footer Bottom Start -->
<div class="footer-bottom">
    <div class="container">
        <div class="row">
            <div class="col-md-6 copyright">
                <p>Supported By &copy; <a href="https://csu.edu.cn">CSU</a>. </p>
            </div>

            <div class="col-md-6 template-by">
                <p>Powered By <a href="https://csu.edu.cn">CSUer</a></p>
            </div>
        </div>
    </div>
</div>
<!-- Footer Bottom End -->

<!-- Back to Top -->
<a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>

<!-- JavaScript Libraries -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/slick/slick.min.js"></script>

<!-- Template Javascript -->
<script src="javascripts/main.js"></script>

</body>
</html>

